<script setup lang="ts">
import {useRouter} from "vue-router";
import TeamCartList from "../../components/TeamCartList.vue";
import {Ref, ref} from "vue";
import {getTeamList} from "@/api/team.ts";
import { TeamType } from "@/models/Team";

// 加入队伍
const router = useRouter()
const doJoinTeam = () => {
  router.push('/team/add')
}
const offset = ref({ x: 300, y: 500 })

// 获取队伍列表
const teamList:Ref<TeamType[]> = ref([])
const activeName = ref('0')
const searchText = ref('')
const currentPage = ref(0)
const listTeam = async (val='',status=0) => {
  const res = await getTeamList(val,status,currentPage.value)
  if(res.data.code === 0){
    if(res.data.data.records.length>0){
      teamList.value.push(...res.data.data.records)
      loading.value = false
    }else{
      finished.value = true
      loading.value =false
    }
  }
}
// 搜索队伍
const onSearch = () => {
  listTeam(searchText.value)
}
// 公开，加密状态切换
const changeStatus = () => {
  teamList.value = []
  currentPage.value = 1
  finished.value = false
  if(activeName.value === '0'){
    listTeam(searchText.value, 0);
  }else {
    listTeam(searchText.value, 2);
  }
}

// 下滑加载更多
const loading = ref(false)
const finished = ref(false)
const onLoad = () => {
  currentPage.value++
  listTeam(searchText.value,Number(activeName.value))
}
// 刷新
const refresh = () => {
   teamList.value = []
  currentPage.value = 1
  if(activeName.value === '0'){
    listTeam(searchText.value, 0);
  }else {
    listTeam(searchText.value, 2);
  }
}
</script>

<template>
  <van-floating-bubble
      axis="lock"
      icon="plus"
      :offset="offset"
      @click="doJoinTeam"
  />
  <div>
    <van-search v-model="searchText" @search="onSearch" placeholder="搜索队伍" />
  </div>
  <div>
    <van-tabs v-model:active="activeName" @change="changeStatus">
      <van-tab title="公开" name="0"></van-tab>
      <van-tab title="加密"  name="2"></van-tab>
    </van-tabs>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <TeamCartList :team-list="teamList" @change-data="refresh()"></TeamCartList>
    </van-list>
    <van-empty v-if="!teamList || teamList.length<1" image="search" description="没有相应队伍" />
  </div>
</template>

<style scoped>

</style>